import React from 'react';
import { Progress, Button, Balloon } from '@teamix/ui';
import utils from 'utils';
import docs from 'utils/docs';
import ListLoading from 'atComponents/ListLoading';
import DisableReposDialog from './disableReposDialog';
import intl from '../../../../../../../../../../locale';

const { Tooltip } = Balloon;

export default class Overview extends React.Component {
  state = {};

  prefix = 'sensitive-info-report-overview';

  componentDidMount() {
    this.props.getInfoReportOverview();
  }

  render() {
    const {
      infoReportOverview = {},
      infoReportOverviewLoading,
      sensitive_info_detection,
    } = this.props;
    const { enabled_project_num = 0, disabled_project_num = 0 } = infoReportOverview;

    if (infoReportOverviewLoading) {
      return <ListLoading />;
    }

    const sensitive_info_detection_enabled =
      sensitive_info_detection && sensitive_info_detection.enabled;

    return (
      <div className="risk-section sensitive-info-report-overview">
        <div className={`${this.prefix}-tips`}>
          {/* 云效直接使用master分支 https://teambition.alibaba-inc.com/task/5e957a4671af3903a4eb744c */}
          <div>
            {intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.overview.DataSourceTheLatestScan',
              defaultMessage: '数据来源：代码库 master 分支最新提交的扫描结果',
            })}
          </div>
          <Tooltip
            trigger={
              <div>
                {intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.overview.DataUpdateTime',
                  defaultMessage: '数据更新时间：',
                })}

                {utils.getBeautyTime(infoReportOverview.gmt_modified)}
              </div>
            }
            align="tr"
          >
            {intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.overview.DataUpdateFrequencyUpdatedThe',
              defaultMessage: '数据更新频率：次日更新（T+1）',
            })}
          </Tooltip>
        </div>
        <div className={`${this.prefix}-card`}>
          <div className={`${this.prefix}-card-body`}>
            <Progress
              percent={(enabled_project_num / (enabled_project_num + disabled_project_num)) * 100}
              shape="circle"
              size="medium"
              className={`${this.prefix}-progres`}
              textRender={() => null}
            />

            <div className={`${this.prefix}-card-body-item`}>
              <div className={`${this.prefix}-card-body-item-label`}>
                {intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.overview.ScanEnabled',
                  defaultMessage: '已开启扫描',
                })}
              </div>
              <div className={`${this.prefix}-card-body-item-value`}>
                <span className={`${this.prefix}-card-body-item-value-num`}>
                  {enabled_project_num}
                </span>
                {intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.overview.CodeLibraries',
                  defaultMessage: '个代码库',
                })}
              </div>
            </div>
            <div
              className={`${this.prefix}-card-body-item`}
              style={{ display: sensitive_info_detection_enabled ? 'none' : 'block' }}
            >
              <div className={`${this.prefix}-card-body-item-label`}>
                {intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.overview.ScanDisabled',
                  defaultMessage: '未开启扫描',
                })}
              </div>
              <div className={`${this.prefix}-card-body-item-value`}>
                <span className={`${this.prefix}-card-body-item-value-num`}>
                  {disabled_project_num}
                </span>
                {intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.overview.CodeLibraries',
                  defaultMessage: '个代码库',
                })}

                {enabled_project_num && disabled_project_num > 0 ? (
                  <DisableReposDialog
                    trigger={
                      <Button type="primary" text style={{ marginLeft: 8 }}>
                        {intl.get({
                          id: 'code-assets.containers.sensitiveInfoReport.overview.See',
                          defaultMessage: '查看',
                        })}
                      </Button>
                    }
                    {...this.props}
                  />
                ) : null}
                {!enabled_project_num ? (
                  <Button
                    type="primary"
                    text
                    component="a"
                    target="_blank"
                    href={docs('sensitiveInformationDetection')}
                    style={{ marginLeft: 8 }}
                  >
                    {intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.overview.HowToEnable',
                      defaultMessage: '如何开启',
                    })}
                  </Button>
                ) : null}
              </div>
            </div>
          </div>
          {enabled_project_num ? (
            <div className={`${this.prefix}-card-footer`}>
              <div className={`${this.prefix}-card-footer-item`}>
                <div className={`${this.prefix}-card-footer-item-label`}>
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.overview.TotalNumberOfQuestions',
                    defaultMessage: '问题总数',
                  })}
                </div>
                <div className={`${this.prefix}-card-footer-item-value`}>
                  {infoReportOverview.issue_total_num}
                </div>
              </div>
              <div className={`${this.prefix}-card-footer-item`}>
                <div className={`${this.prefix}-card-footer-item-label`}>
                  <div className={`${this.prefix}-card-footer-item-icon blocker`} />
                  Blocker
                </div>
                <div className={`${this.prefix}-card-footer-item-value`}>
                  {infoReportOverview.blocker_total_num}
                </div>
              </div>
              <div className={`${this.prefix}-card-footer-item`}>
                <div className={`${this.prefix}-card-footer-item-label`}>
                  <div className={`${this.prefix}-card-footer-item-icon critical`} />
                  Critical
                </div>
                <div className={`${this.prefix}-card-footer-item-value`}>
                  {infoReportOverview.critical_total_num}
                </div>
              </div>
              <div className={`${this.prefix}-card-footer-item`}>
                <div className={`${this.prefix}-card-footer-item-label`}>
                  <div className={`${this.prefix}-card-footer-item-icon major`} />
                  Major
                </div>
                <div className={`${this.prefix}-card-footer-item-value`}>
                  {infoReportOverview.major_total_num}
                </div>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    );
  }
}
